使用jQuery操作data-attr的注意事项

今天又一次掉进这个坑里面。

data-attr是HTML5里面的一个新属性（其实这东西都好多年了），方便CSS\JS去读取DOM上面的属性值。

jQuery在很久之前，就封装了一个 $.fn.data() 的方法，而该方法是将数据存放在DOM内部的一个数据对象中。

在data-attr来了之后， $.fn.data() 也支持用来读取DOM上面的data-attr，但是，它会缓存这个结果到DOM内部的数据对象，他会缓存，缓存，缓存。

后续对这个key的所有读写操作，其实都是操作的这个数据缓存，而DOM上面的data-attr并不会发生任何变化。

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

如果你有一些样式，是希望同步这个data-attr的状态的，用 $.fn.data() 来操作就会发生一些奇怪的事情（之前一次没细看jQuery这块的实现，只是发现出来的效果怪怪的），建议改用 $.fn.attr() 方法或者JS原生方法。

附：

• 为了和 $.data() 做区分，我这里用 $.fn.attr() 和 $.fn.data() 这种jQuery原型链上的方法来表示 $(selector).data()

• 同步发表于我的博客